<template>
  <div class="treeTools">
    <!-- 树状组件 -->
    <el-row style="width: 100%">
      <el-col :span="16">
        <i class="el-icon-s-home" />
        <span>{{ item.name }}</span>
      </el-col>

      <el-col :span="8">
        <!-- <i class="incline">{{ item.manager }}</i> -->
        <span>{{ item.manager }}</span>

        <el-dropdown @command="myCommand">
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right" />
          </span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="add">添加子部门</el-dropdown-item>
            <el-dropdown-item v-if="!item.isHear" command="edit"
              >添加权限</el-dropdown-item
            >
            <el-dropdown-item v-if="!item.isHear" command="del"
              >删除部门</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="js">
import { getDelApi } from '@/api/departments.js'

export default {
  name: 'TreeTools',

  /** 子组件往父组件传值 */
  props: ['item'],
  data() {
    return {

    }
  },
  methods: {
    myCommand(command) {
      if (command === 'add') {
      // 添加子部门
        this.$emit('addShow', this.item.id)
      } else if (command === 'edit') {
      // 添加权限
        this.$emit('editShow', this.item.id)

        console.log(222)
      } else if (command === 'del') {
      // 删除部门
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          // 删除部门
          await getDelApi(this.item.id)
          this.$emit('upDataDate')
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch()
      }
    }
  }
}
</script>

<style lang="scss">
.treeTools {
  span.el-dropdown-link.el-dropdown-selfdefine {
    font-size: 17px;
  }
  i {
    margin-right: 5px;
  }
  .incline {
    font-style: normal;
    margin-right: 10px;
  }
  span {
    margin-right: 5px;
  }
  .el-tree-node__content {
    margin: 10px 40px;
  }
}
</style>
